<template>
    <div>
        <Row>
            <Col span="12" offset="4">
                <Form v-if="!formSubmitAlready">
                    <FormItem label="商品名称">
                        <Input v-model="product.productName">请输入您的商品名</Input>
                    </FormItem>
                    <FormItem label="简介">
                        <Input type="textarea" v-model="product.productBrief">请输入您的商品简介</Input>
                    </FormItem>
                    <FormItem label="选择您商品的标签">
                        <Select v-model="multiTag" multiple style="width:260px">
                            <Option v-for="item in tags" :value="item.value" :key="item.key">{{ item.value }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="您商品的价格">
                        <InputNumber :min="1.00" :step="0.01" v-model="product.price"></InputNumber>
                    </FormItem>
                    <FormItem label="您商品的初始库存">
                        <InputNumber :min="1" :step="1" v-model="product.productStock"></InputNumber>
                    </FormItem>
                    <Tooltip content="这将帮助我们更好的推送您的产品">
                        您商品的主要供货地
                    </Tooltip>
                    <FormItem>
                        <Cascader :data="city" v-model="sendCity"></Cascader>
                    </FormItem>

                    <Button type="primary" @click="submit">提交</Button>
                </Form>
            </Col>
        </Row>
        <div v-if="formSubmitAlready">
            <Card>
                <p slot="title">您已成功创建商品！上传两张照片来吸引顾客吧！</p>
            </Card>
            <label>封面</label>
            <div>
                <Upload
                        v-if="reviewCover===''"
                        style="width: 50%"
                        type="drag"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="pictureFormatError"
                        :before-upload="beforeCoverUpload"
                        action="">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>单击或拖拽您的商品封面至此处</p>
                    </div>
                </Upload>
                <Row>
                    <img v-bind:src="reviewCover" style="height: 100px;width: auto">
                </Row>
                <Row v-if="reviewCover!==''">
                    <Button @click="uploadProductCover">确认上传</Button>
                    <Button @click="cancelUploadCover">取消上传</Button>
                </Row>
            </div>
            <label>商品详情</label>
            <div>
                <Upload
                        v-if="reviewPicture===''"
                        style="width: 50%"
                        type="drag"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="pictureFormatError"
                        :before-upload="beforePictureUpload"
                        action="">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>单击或拖拽您的商品封面至此处</p>
                    </div>
                </Upload>
                <Row>
                    <img v-bind:src="reviewPicture" style="height: 100px;width: auto">
                </Row>
                <Row v-if="reviewPicture!==''">
                    <Button @click="uploadProductPicture">确认上传</Button>
                    <Button @click="cancelUploadPicture">取消上传</Button>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
    import tag from "@/utils/tag";
    import axios from "axios";
    import city from "@/utils/city";
    import globalData from "@/utils/globalData";

    export default {
        name: "ProductAdd",
        data() {
            return {
                formSubmitAlready: false,
                productId: '',
                reviewCover: '',
                reviewPicture:'',
                confirmC:false,
                confirmP:false,
                product: {
                    productName: '',
                    productBrief: '',
                    belongToId: globalData.USER.userId,
                    belongToName: globalData.USER.nickName,
                    productLocation: '',
                    price: 1.00,
                    sellerUUID:globalData.USER.avatarUUId,
                    tag: '',
                    productStock: 1
                },
                cover: '',
                picture: '',
                multiTag: [],
                tags: tag.tag,
                city: city.city,
                sendCity: {}
            }
        },
        watch: {},
        methods: {
            cancelUploadPicture(){
              this.picture=''
              this.reviewPicture=''
            },
            cancelUploadCover() {
                this.cover = ''
                this.reviewCover = ''
            },
            beforeCoverUpload(file) {
                this.cover = file
                this.reviewCover = window.URL.createObjectURL(file)
                return false
            },
            beforePictureUpload(file) {
                this.picture = file
                this.reviewPicture=window.URL.createObjectURL(file)
                return false
            },
            pictureFormatError() {
                console.log("ERROR")
            },
            uploadProductCover() {
                let self = this
                // console.log(this.file)
                let formData = new FormData();
                formData.append("file", this.cover);
                axios({
                    method: 'post',
                    url: '/file/pro/productCover/' + this.productId,
                    data: formData
                }).then(function () {
                    self.$Notice.success({
                        title: "上传封面成功!"
                    })
                    self.confirmC=true
                    if(self.confirmP){
                        self.$router.replace("/ProductShow")
                    }
                })
            },
            uploadProductPicture() {
                let self = this
                // console.log(this.file)
                let formData = new FormData();
                formData.append("file", this.picture);
                axios({
                    method: 'post',
                    url: '/file/pro/productPicture/' + this.productId,
                    data: formData
                }).then(function () {
                    self.$Notice.success({
                        title: "上传商品详情页成功!"
                    })
                    self.confirmP=true
                    if(self.confirmC){
                        self.$router.replace("/ProductShow")
                    }
                })
            },
            submit() {
                let self = this
                this.product.price = this.product.price.toFixed(2)
                this.product.productLocation = this.sendCity[0] + this.sendCity[1]
                for (let i = 0; i < this.multiTag.length; i++) {
                    this.product.tag += this.multiTag[i]
                    this.product.tag += "-"
                }
                if (this.product.productName == "") {
                    this.$Notice.error({
                        title: "标题，Sir"
                    })
                    return
                }
                if (this.product.productBrief == "") {
                    this.$Notice.error({
                        title: "简介，Sir"
                    })
                    return
                }
                // if(this.product)
                console.log(this.product)
                axios({
                    method: 'post',
                    url: '/product',
                    data: this.product
                }).then(function (res) {
                    self.$Notice.success({
                        title: '发布成功',
                    });
                    // self.$router.push('/')
                    //获取上传成功之后的产品ID
                    self.productId = res.data
                    self.formSubmitAlready = true
                })
            }
        }
    }
</script>

<style scoped>

</style>